<template>
  <!-- 公共loading组件 -->
  <load :loading=loading />
  <!-- 主体内容 -->
  <div v-if="loading == false">
    <!-- 公共标题组件 -->
    <Header v-on:closeMenu="closeMenu" :show="showRef" />
    <main id="main">
      <!-- 公共导航组件 -->
      <Menu v-on:showMenuByChild="showMenuByChild" />
      <!-- 主体内容 -->
      <section class="tags ">
        <header class="header">
          <h1 class="header-title">随言碎语</h1>
        </header>
        <div class="tags-container padding-bottom">
          <div v-for="(item, index) in list" :key="index">
            <div class="playlog-item" >
              <div class="dotline">
                <!-- 竖线 -->
                <div class="line"></div>
                <!-- 圆点 -->
                <div class="dot"></div>
                <!-- 时间戳 -->
              </div>
              <div class="content">
                <p class="course left">{{item.addtime}}</p>
                <p class="chapter left">{{item.content}}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <!-- 抽屉组件 -->
    <drawer v-on:showMenuByChild="showMenuByChild"></drawer>
    <!-- 置顶和IM按钮 -->
    <TopIM />
    <!-- 网站底部组件 -->
    <Footer />
  </div>
</template>

<style lang="scss" scoped>
  @import "/@/assets/css/pc/gossip.scss";
  @import "../../assets/css/pc/article-detail.scss";
</style>

<script lang="ts">
// 引入js文件
import gossip from "/@/assets/js/pc/gossip";
import { SmileOutlined } from '@ant-design/icons-vue';
// 使用js对象
export default {
  ...gossip,
};
</script>